<template>
  <div>
    <Header />
    <!-- breadcrumbs -->
    <div class="w3ls-inner-banner">
      <div class="container">
        <h2>About Us</h2>
        <label></label>
        <div class="clearfix"></div>
      </div>
    </div>
    <!-- //breadcrumbs -->

    <!-- main-content -->
    <div class="main-content">
      <!-- about-page -->
      <!-- welcome -->
      <div class="welcome-top">
        <div class="container">
          <div class="col-md-6 welcome_top_left">
            <h3>WELCOME</h3>
            <h5>TO OUR ESTATE GROUP</h5>
            <p>
              Lorem Ipsum is simply dummy printing industry. It has survived
              not. It was popularised in the 1960s with the release of Letraset
              sheets containing Lorem Ipsum passages, and more recently.
            </p>
          </div>
          <div class="col-md-6 welcome_top_right">
            <h3>WE'RE OPEN</h3>
            <h5>In Sed Ut perspiciatis Street</h5>
            <div class="welcome_right_location">
              <div class="location_img">
                <img src="images/loc.jpg" alt="" />
              </div>
              <div class="location">
                <p>
                  Lorem Ipsum has been the industry's since the 1500s. It has
                  survived centuries.
                </p>
                <p class="location_text">
                  <span class="glyphicon glyphicon-map-marker"></span>795 Folsom
                  Ave, Suite 600,San Francisco, CA 94107
                </p>
                <p class="location_text">
                  <span class="glyphicon glyphicon-dashboard"></span>Mon to Sat
                  8:30am - 4:30pm, Sunday - Holiday
                </p>
              </div>
              <div class="clearfix"></div>
            </div>
          </div>
          <div class="clearfix"></div>
        </div>
      </div>
      <!-- /welcome -->
      <!-- Stats -->
      <div class="stats">
        <div class="container">
          <h3>Overview</h3>
          <div class="stats-info">
            <div class="col-md-4 col-sm-4 stats-grid slideanim">
              <i class="fa fa-smile-o"></i>
              <div
                  class="numscroller numscroller-big-bottom"
                  data-slno="1"
                  data-min="0"
                  data-max="15500"
                  data-delay=".5"
                  data-increment="50"
              >
                15500
              </div>
              <p class="stats-info">Happy Clients</p>
            </div>
            <div class="col-md-4 col-sm-4 stats-grid slideanim">
              <i class="fa fa-tags" aria-hidden="true"></i>
              <div
                  class="numscroller numscroller-big-bottom"
                  data-slno="1"
                  data-min="0"
                  data-max="18"
                  data-delay=".5"
                  data-increment="5"
              >
                18
              </div>
              <p class="stats-info">Sales per month</p>
            </div>
            <div class="col-md-4 col-sm-4 stats-grid slideanim">
              <i class="fa fa-home" aria-hidden="true"></i>
              <div
                  class="numscroller numscroller-big-bottom"
                  data-slno="1"
                  data-min="0"
                  data-max="21500"
                  data-delay=".5"
                  data-increment="20"
              >
                21500
              </div>
              <p class="stats-info">Number of Homes</p>
            </div>
            <div class="clearfix"></div>
          </div>
        </div>
      </div>
      <!-- //Stats -->

      <!-- OUR AGENTS -->
      <section class="team-w3ls">
        <div class="container">
          <div class="agileits-team text-center">
            <h3>MEET OUR AGENTS</h3>
            <p>
              Lorem Ipsum is simply dummy text of the printing and typesetting
              industry.
            </p>

            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 w3-agent">
              <div class="hovereffect">
                <img class="img-responsive" src="images/agent-1.jpg" alt="" />
                <div class="overlay">
                  <h4>Agent name</h4>
                  <p>
                    <a href="#" data-toggle="modal" data-target="#agent1"
                    >Contact me</a
                    >
                  </p>
                </div>
              </div>
            </div>

            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 w3-agent">
              <div class="hovereffect">
                <img class="img-responsive" src="images/agent-2.jpg" alt="" />
                <div class="overlay">
                  <h4>Agent name</h4>
                  <p>
                    <a href="#" data-toggle="modal" data-target="#agent2"
                    >Contact me</a
                    >
                  </p>
                </div>
              </div>
            </div>

            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 w3-agent">
              <div class="hovereffect">
                <img class="img-responsive" src="images/agent-3.jpg" alt="" />
                <div class="overlay">
                  <h4>Agent name</h4>
                  <p>
                    <a href="#" data-toggle="modal" data-target="#agent3"
                    >Contact me</a
                    >
                  </p>
                </div>
              </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 w3-agent">
              <div class="hovereffect">
                <img class="img-responsive" src="images/agent-4.jpg" alt="" />
                <div class="overlay">
                  <h4>Agent name</h4>
                  <p>
                    <a href="#" data-toggle="modal" data-target="#agent4"
                    >Contact me</a
                    >
                  </p>
                </div>
              </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 w3-agent">
              <div class="hovereffect">
                <img class="img-responsive" src="images/agent-5.jpg" alt="" />
                <div class="overlay">
                  <h4>Agent name</h4>
                  <p>
                    <a href="#" data-toggle="modal" data-target="#agent5"
                    >Contact me</a
                    >
                  </p>
                </div>
              </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 w3-agent">
              <div class="hovereffect">
                <img class="img-responsive" src="images/agent-6.jpg" alt="" />
                <div class="overlay">
                  <h4>Agent name</h4>
                  <p>
                    <a href="#" data-toggle="modal" data-target="#agent6"
                    >Contact me</a
                    >
                  </p>
                </div>
              </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 w3-agent">
              <div class="hovereffect">
                <img class="img-responsive" src="images/agent-7.jpg" alt="" />
                <div class="overlay">
                  <h4>Agent name</h4>
                  <p>
                    <a href="#" data-toggle="modal" data-target="#agent7"
                    >Contact me</a
                    >
                  </p>
                </div>
              </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 w3-agent">
              <div class="hovereffect">
                <img class="img-responsive" src="images/agent-8.jpg" alt="" />
                <div class="overlay">
                  <h4>Agent name</h4>
                  <p>
                    <a href="#" data-toggle="modal" data-target="#agent8"
                    >Contact me</a
                    >
                  </p>
                </div>
              </div>
            </div>
            <div class="clearfix"></div>
          </div>
        </div>
      </section>
      <!-- modal-for agent1-details -->
      <div
          class="modal fade modal-about"
          id="agent1"
          tabindex="-1"
          role="dialog"
      >
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button
                  type="button"
                  class="close"
                  data-dismiss="modal"
                  aria-label="Close"
              >
                <span aria-hidden="true">&times;</span>
              </button>
              <h4 class="modal-title">ABOUT ME</h4>
            </div>
            <div class="modal-body modal-spa">
              <div class="w3layouts-about">
                <div class="col-md-4 about-left">
                  <img src="images/agent-1.jpg" class="img-responsive" alt="" />
                </div>
                <div class="col-md-8 about-right wthree">
                  <h3>Hi, i'm <span>K. Thompson </span></h3>
                  <h4>Certificated Agent</h4>
                  <ul class="address">
                    <li>
                      <ul class="agileits-address-text">
                        <li><b>PHONE </b></li>
                        <li>+00 111 222 3333</li>
                      </ul>
                    </li>
                    <li>
                      <ul class="agileits-address-text">
                        <li><b>ADDRESS </b></li>
                        <li>13 browne Street, San Francisco.</li>
                      </ul>
                    </li>
                    <li>
                      <ul class="agileits-address-text">
                        <li><b>E-MAIL </b></li>
                        <li>
                          <a href="mailto:example@mail.com">
                            mail@example.com</a
                          >
                        </li>
                      </ul>
                    </li>
                  </ul>
                </div>
                <div class="clearfix"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- //modal-for agent1-details -->
      <!-- modal-for agent2-details -->
      <div
          class="modal fade modal-about"
          id="agent2"
          tabindex="-1"
          role="dialog"
      >
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button
                  type="button"
                  class="close"
                  data-dismiss="modal"
                  aria-label="Close"
              >
                <span aria-hidden="true">&times;</span>
              </button>
              <h4 class="modal-title">ABOUT ME</h4>
            </div>
            <div class="modal-body modal-spa">
              <div class="w3layouts-about">
                <div class="col-md-4 about-left">
                  <img src="images/agent-2.jpg" class="img-responsive" alt="" />
                </div>
                <div class="col-md-8 about-right wthree">
                  <h3>Hi, i'm <span>M. John Bean </span></h3>
                  <h4>Certificated Agent</h4>
                  <ul class="address">
                    <li>
                      <ul class="agileits-address-text">
                        <li><b>PHONE </b></li>
                        <li>+(040) 987 65 4321</li>
                      </ul>
                    </li>
                    <li>
                      <ul class="agileits-address-text">
                        <li><b>ADDRESS </b></li>
                        <li>15th Black Door Apartment, San Francisco.</li>
                      </ul>
                    </li>
                    <li>
                      <ul class="agileits-address-text">
                        <li><b>E-MAIL </b></li>
                        <li>
                          <a href="mailto:example@mail.com">
                            mail@example.com</a
                          >
                        </li>
                      </ul>
                    </li>
                  </ul>
                </div>
                <div class="clearfix"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- //modal-for agent2-details -->
      <!-- modal-for agent3-details -->
      <div
          class="modal fade modal-about"
          id="agent3"
          tabindex="-1"
          role="dialog"
      >
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button
                  type="button"
                  class="close"
                  data-dismiss="modal"
                  aria-label="Close"
              >
                <span aria-hidden="true">&times;</span>
              </button>
              <h4 class="modal-title">ABOUT ME</h4>
            </div>
            <div class="modal-body modal-spa">
              <div class="w3layouts-about">
                <div class="col-md-4 about-left">
                  <img src="images/agent-3.jpg" class="img-responsive" alt="" />
                </div>
                <div class="col-md-8 about-right wthree">
                  <h3>Hi, i'm <span>K. Smith </span></h3>
                  <h4>Certificated Agent</h4>
                  <ul class="address">
                    <li>
                      <ul class="agileits-address-text">
                        <li><b>PHONE </b></li>
                        <li>+00 111 222 3333</li>
                      </ul>
                    </li>
                    <li>
                      <ul class="agileits-address-text">
                        <li><b>ADDRESS </b></li>
                        <li>13 browne Street, San Francisco.</li>
                      </ul>
                    </li>
                    <li>
                      <ul class="agileits-address-text">
                        <li><b>E-MAIL </b></li>
                        <li>
                          <a href="mailto:example@mail.com">
                            mail@example.com</a
                          >
                        </li>
                      </ul>
                    </li>
                  </ul>
                </div>
                <div class="clearfix"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- //modal-for agent3-details -->
      <!-- modal-for agent4-details -->
      <div
          class="modal fade modal-about"
          id="agent4"
          tabindex="-1"
          role="dialog"
      >
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button
                  type="button"
                  class="close"
                  data-dismiss="modal"
                  aria-label="Close"
              >
                <span aria-hidden="true">&times;</span>
              </button>
              <h4 class="modal-title">ABOUT ME</h4>
            </div>
            <div class="modal-body modal-spa">
              <div class="w3layouts-about">
                <div class="col-md-4 about-left">
                  <img src="images/agent-4.jpg" class="img-responsive" alt="" />
                </div>
                <div class="col-md-8 about-right wthree">
                  <h3>Hi, i'm <span>R. Micahel </span></h3>
                  <h4>Certificated Agent</h4>
                  <ul class="address">
                    <li>
                      <ul class="agileits-address-text">
                        <li><b>PHONE </b></li>
                        <li>+(040) 987 65 4321</li>
                      </ul>
                    </li>
                    <li>
                      <ul class="agileits-address-text">
                        <li><b>ADDRESS </b></li>
                        <li>15th Black Door Apartment, San Francisco.</li>
                      </ul>
                    </li>
                    <li>
                      <ul class="agileits-address-text">
                        <li><b>E-MAIL </b></li>
                        <li>
                          <a href="mailto:example@mail.com">
                            mail@example.com</a
                          >
                        </li>
                      </ul>
                    </li>
                  </ul>
                </div>
                <div class="clearfix"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- //modal-for agent4-details -->
      <!-- modal-for agent5-details -->
      <div
          class="modal fade modal-about"
          id="agent5"
          tabindex="-1"
          role="dialog"
      >
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button
                  type="button"
                  class="close"
                  data-dismiss="modal"
                  aria-label="Close"
              >
                <span aria-hidden="true">&times;</span>
              </button>
              <h4 class="modal-title">ABOUT ME</h4>
            </div>
            <div class="modal-body modal-spa">
              <div class="w3layouts-about">
                <div class="col-md-4 about-left">
                  <img src="images/agent-5.jpg" class="img-responsive" alt="" />
                </div>
                <div class="col-md-8 about-right wthree">
                  <h3>Hi, i'm <span>Johnny Cage </span></h3>
                  <h4>Certificated Agent</h4>
                  <ul class="address">
                    <li>
                      <ul class="agileits-address-text">
                        <li><b>PHONE </b></li>
                        <li>+00 111 222 3333</li>
                      </ul>
                    </li>
                    <li>
                      <ul class="agileits-address-text">
                        <li><b>ADDRESS </b></li>
                        <li>13 browne Street, San Francisco.</li>
                      </ul>
                    </li>
                    <li>
                      <ul class="agileits-address-text">
                        <li><b>E-MAIL </b></li>
                        <li>
                          <a href="mailto:example@mail.com">
                            mail@example.com</a
                          >
                        </li>
                      </ul>
                    </li>
                  </ul>
                </div>
                <div class="clearfix"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- //modal-for agent5-details -->
      <!-- modal-for agent6-details -->
      <div
          class="modal fade modal-about"
          id="agent6"
          tabindex="-1"
          role="dialog"
      >
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button
                  type="button"
                  class="close"
                  data-dismiss="modal"
                  aria-label="Close"
              >
                <span aria-hidden="true">&times;</span>
              </button>
              <h4 class="modal-title">ABOUT ME</h4>
            </div>
            <div class="modal-body modal-spa">
              <div class="w3layouts-about">
                <div class="col-md-4 about-left">
                  <img src="images/agent-6.jpg" class="img-responsive" alt="" />
                </div>
                <div class="col-md-8 about-right wthree">
                  <h3>Hi, i'm <span>Thomson Doe </span></h3>
                  <h4>Certificated Agent</h4>
                  <ul class="address">
                    <li>
                      <ul class="agileits-address-text">
                        <li><b>PHONE </b></li>
                        <li>+(040) 987 65 4321</li>
                      </ul>
                    </li>
                    <li>
                      <ul class="agileits-address-text">
                        <li><b>ADDRESS </b></li>
                        <li>15th Black Door Apartment, San Francisco.</li>
                      </ul>
                    </li>
                    <li>
                      <ul class="agileits-address-text">
                        <li><b>E-MAIL </b></li>
                        <li>
                          <a href="mailto:example@mail.com">
                            mail@example.com</a
                          >
                        </li>
                      </ul>
                    </li>
                  </ul>
                </div>
                <div class="clearfix"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- //modal-for agent6-details -->
      <!-- modal-for agent7-details -->
      <div
          class="modal fade modal-about"
          id="agent7"
          tabindex="-1"
          role="dialog"
      >
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button
                  type="button"
                  class="close"
                  data-dismiss="modal"
                  aria-label="Close"
              >
                <span aria-hidden="true">&times;</span>
              </button>
              <h4 class="modal-title">ABOUT ME</h4>
            </div>
            <div class="modal-body modal-spa">
              <div class="w3layouts-about">
                <div class="col-md-4 about-left">
                  <img src="images/agent-7.jpg" class="img-responsive" alt="" />
                </div>
                <div class="col-md-8 about-right wthree">
                  <h3>Hi, i'm <span>P. Edward Crisp </span></h3>
                  <h4>Certificated Agent</h4>
                  <ul class="address">
                    <li>
                      <ul class="agileits-address-text">
                        <li><b>PHONE </b></li>
                        <li>+00 111 222 3333</li>
                      </ul>
                    </li>
                    <li>
                      <ul class="agileits-address-text">
                        <li><b>ADDRESS </b></li>
                        <li>13 browne Street, San Francisco.</li>
                      </ul>
                    </li>
                    <li>
                      <ul class="agileits-address-text">
                        <li><b>E-MAIL </b></li>
                        <li>
                          <a href="mailto:example@mail.com">
                            mail@example.com</a
                          >
                        </li>
                      </ul>
                    </li>
                  </ul>
                </div>
                <div class="clearfix"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- //modal-for agent7-details -->
      <!-- modal-for agent8-details -->
      <div
          class="modal fade modal-about"
          id="agent8"
          tabindex="-1"
          role="dialog"
      >
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button
                  type="button"
                  class="close"
                  data-dismiss="modal"
                  aria-label="Close"
              >
                <span aria-hidden="true">&times;</span>
              </button>
              <h4 class="modal-title">ABOUT ME</h4>
            </div>
            <div class="modal-body modal-spa">
              <div class="w3layouts-about">
                <div class="col-md-4 about-left">
                  <img src="images/agent-8.jpg" class="img-responsive" alt="" />
                </div>
                <div class="col-md-8 about-right wthree">
                  <h3>Hi, i'm <span>S. Smith Kevin</span></h3>
                  <h4>Certificated Agent</h4>
                  <ul class="address">
                    <li>
                      <ul class="agileits-address-text">
                        <li><b>PHONE </b></li>
                        <li>+(040) 987 65 4321</li>
                      </ul>
                    </li>
                    <li>
                      <ul class="agileits-address-text">
                        <li><b>ADDRESS </b></li>
                        <li>15th Black Door Apartment, San Francisco.</li>
                      </ul>
                    </li>
                    <li>
                      <ul class="agileits-address-text">
                        <li><b>E-MAIL </b></li>
                        <li>
                          <a href="mailto:example@mail.com">
                            mail@example.com</a
                          >
                        </li>
                      </ul>
                    </li>
                  </ul>
                </div>
                <div class="clearfix"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- //modal-for agent8-details -->
      <!-- //	OUR AGENTS -->
      <!-- //about-page -->
    </div>
    <!-- //main-content -->
    <!-- footer -->
    <Footer></Footer>
    <!-- //footer -->
  </div>
</template>

<script>
import { onMounted } from "vue";
import Header from "@/components/header.vue";
import Footer from "@/components/footer.vue";

require("../assets/js/numscroller-1.0.js");
export default {
  name: "Home",

  components: { Header,Footer },

  setup() {
    function hideURLbar() {
      window.scrollTo(0, 1);
    }
    onMounted(() => {
      addEventListener(
        "load",
        function () {
          setTimeout(hideURLbar, 0);
        },
        false
      );
      $().UItoTop({ easingType: "easeOutQuart" });
      $(".scroll").click(function (event) {
        event.preventDefault();
        $("html,body").animate({ scrollTop: $(this.hash).offset().top }, 1000);
      });
    });
  },
};
</script>

<style scoped>
</style>
